<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<image class="user_img" src="/static/my/vip_user.png"></image>
				<view class="user_msg">
					<view class="phone">{{userInfo.email}}</view>
					<view class="u_txt" v-if="userInfo.vip_level > 1">{{userInfo.vip_date}}</view>
					<view class="u_txt" v-else>{{$t('vip.tip')}}</view>
				</view>
				<image class="bg" src="/static/other/vip_user_bg.png"></image>
			</view>
		</view>
		<view class="main">
			<view class="vip_msg">
				<view class="v_tit">
					<label class="tit">{{$t('vip.title')}}</label>
				</view>
				<view class="v_con">
					<image class="logo" src="/static/other/vip_msg_logo_01.png" mode="widthFix"></image>
					<view class="msg">
						<view class="m_t1">{{$t('vip.remark01')}}</view>
						<view class="m_t2">{{$t('vip.remark02')}}</view>
					</view>
				</view>
			</view>
			<view class="vip_card">
				<block v-for="(item,index) in vipArr" :key="'v_'+index">
					<view class="v_box" :class="index == select_type ? 'v_box_s':''" @click="vipChange" :data-index="index">
						<view class="v_c_t1">{{item.month}}{{$t('vip.month1')}}VIP</view>
						<view class="v_c_t2">
							<view class="num">{{item.gold}}</view>
						</view>
						<image class="bean" src="/static/other/bean.png" mode="widthFix"></image>
						<view class="tip" v-if="item.level == 1">{{$t('vip.month')}}</view>
						<view class="tip" v-if="item.level == 2">{{$t('vip.quarter')}}</view>
						<view class="tip" v-if="item.level == 3">{{$t('vip.year')}}</view>
					</view>
				</block>
			</view>
			<view class="bean_msg">
				<view class="b_con">
					<view class="b_t1">{{$t('vip.my_bean')}}：</view>
					<view class="b_num">{{userInfo.gold||'0.00'}}</view>
					<image class="b_logo" src="/static/other/bean.png" mode="widthFix"></image>
				</view>
				<view class="b_go" @click="$r('/pages/bean/bean')" >{{$t('vip.go_txt')}}<label class="iconfont go">&#xe70f;</label></view>
			</view>
		</view>
		<view class="_footer">
			<view class="btn sub" @click="open_vip()">{{$t('vip.activate_btn')}}</view>
		</view>
		
		<view class="bg_item"></view>
		
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				is_vip:false,
				vipArr : [],
				
				select_type:0 ,
			}
		},
		onLoad() {
			this.initData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods:{
			open_vip(){
				if(!this.hasLogin){
					this.showMsg(this.$t('system.tip4'));
					return false;
				}
			     if(this.select_type == -1){
					 this.showMsg(this.$t('system.tip12'));
					 return false;
				 }
				 let gold = this.vipArr[this.select_type].gold -0;
				 let ugold = this.userInfo.gold - 0;
				 if(ugold < gold){
					 this.showMsg(this.$t('system.tip13'));
					 return false;
				 }
				 uni.$u.throttle(this.real_open_vip, 1800)
				
			},
			real_open_vip(){
				uni.showLoading({
					mask: true
				});
				helper.Timer.start();
				let vid = this.vipArr[this.select_type].id;
				let url = this.site_url + 'api/auth/play/buy_vip_handle?vip_id='+vid;
				this.areq(url).then(res=>{
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(()=>{
						uni.hideLoading();
						if(res.code == 1){
							this.showMsg(this.$t('system.tip31'), 2000, true, 'success');
							uni.$emit('auto_update');
							setTimeout(() => {
								this.$r('/pages/my/my','rel');
							}, 1500)
						}else{
							this.showMsg(res.msg);
						}
					},left_time);
					
					
				})
				
				
			},
			initData(){
				let url = this.site_url + 'api/index/vip_list';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.vipArr = res.data;
					}
					
				})
			},
			vipChange(e){
				this.select_type = e.currentTarget.dataset.index;
			}
		}
	}
</script>

<style lang="scss">
.pageItem{
	padding-bottom: 22vw;
}
.head {
	width: 100%;
	position: fixed;
	z-index: 98;
	padding: calc(var(--status-bar-height) + 4vw) 4% 3vw;
	.h_con {
		width: 100%;
		height: 18vw;
		display: flex;
		align-items: center;
		position: relative;
		padding: 2vw 4vw;
		.user_img {
			width: 12vw;
			height: 12vw;
			position: relative;
			z-index: 2;
		}
		.user_msg {
			flex: 1;
			padding: 0 3vw;
			position: relative;
			z-index: 2;
			.phone {
				width: 100%;
				display: flex;
				color: #481800;
				font-size: 4vw;
				font-weight: bold;
				align-items: center;
			}
			.u_txt {
				font-size: 3.5vw;
				padding-top: 1.3vw;
				color: #815317;
			}
		}
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}
}
.bg_item{
	@include bg_item(80vw,#FFE4AB,$main_bg_color);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 26vw) 4% 0;
	.vip_msg{
		@include card_style();
		background: linear-gradient(135deg, #21232B 0%, #151316 100%);
		color: #F3D19C;
		.v_tit{
			height: 10vw;
			line-height: 10vw;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.tit{
				margin-left: 6vw;
				font-size: 4vw;
				font-weight: bold;
				text-align: center;
				position: relative;
				background: #21232B;
				padding: 0 3vw;
				z-index: 2;
			}
			&::after{
				content: '';
				width: 96%;
				height: 0.5vw;
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				z-index: 1;
				border-radius: 1vw;
				background: linear-gradient(90deg, rgba(255,228,175,0) 0,#FFE4AF 10%, rgba(255,228,175,0) 120%);
			}
			
		}
		.v_con{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 5%;
			.logo{
				width: 8vw;
			}
			.msg{
				flex: 1;
				padding-left: 5vw;
				.m_t1{
					font-size: 3.5vw;
					font-weight: bold;
				}
				.m_t2{
					font-size: 3.2vw;
					color: #9D9D9D;
					padding-top: 1vw;
					line-height: 5vw;
				}
			}
		}
	}
	.vip_card{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 6vw;
		.v_box{
			width: 32%;
			padding: 8vw 3vw 4vw;
			background: #fff;
			border-radius: 3vw;
			border: 1rpx solid #E5E7E7;
			text-align: center;
			position: relative;
			.v_c_t1{
				width: 100%;
				font-size: 3.4vw;
				font-weight: bold;
				color: #000;
				text-align: center;
			}
			.v_c_t2{
				width: 100%;
				text-align: center;
				padding-top: 2vw;
				.num{
					font-size: 6vw;
					font-weight: bold;
					padding-left: 1vw;
				}
			}
			.bean{
				width: 5vw;
				margin-top: 3vw;
			}
			.tip{
				position: absolute;
				padding: 1vw 3vw;
				border-radius: 3vw 3vw 0 3vw;
				color: #fff;
				font-size: 2.6vw;
				background: linear-gradient(90deg, #FD7E47 0%, #E14530 100%);
				top: -1.6vw;
				right: 0;
			}
		}
		.v_box_s{
			background: linear-gradient(0deg, #ffefac 0%, #FFE8BF 100%);
			border: 1vw solid #EB452D;
		}
	}
	.bean_msg{
		width: 100%;
		margin-top: 6vw;
		display: flex;
		align-items: center;
		padding: 0 2vw;
		.b_con{
			flex: 1;
			display: flex;
			align-items: center;
			.b_t1{
				font-size: 4vw;
				color: $main_color5;
				font-weight: bold;
			}
			.b_num{
				font-size: 4.3vw;
				padding-left: 1vw;
				color: $main_color5;
				font-weight: bold;
			}
			.b_logo{
				width: 3.2vw;
				margin-left: 1vw;
			}
		}
		.b_go{
			font-size: 3.6vw;
			color: #fe9233;
			.go{
				font-size: 3.5vw;
			}
		}
	}
}
._footer{
	@include page_button();
	margin-top: 10vw;
	.btn{
		background: linear-gradient(90deg, #FDE59B 0%, #FEC746 100%);
		color: #531900;
	}
}
</style>
